<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue 数据代理</title>
</head>
<body>
  <script>
    function Vue(options) {
      let _data = options.data()
      for(let k in _data) {
        // 立即执行函数解决 k 为最后一个属性问题
        // (function(k) {
        //   Object.defineProperty(this, k, {
        //   get() {
        //     return _data[k]
        //   },
        //   set(val) {
        //     _data[k] = val
        //   }
        // })
        // })(k)
        Object.defineProperty(this, k, {
          get() {
            return _data[k]
          },
          set(val) {
            _data[k] = val
          }
        })

        // 另一种方法
        // this.__defineGetter__(k, function() {
        //   return _data[k]
        // })
        // this.__defineSetter__(k, function(val) {
        //   _data[k] = val
        // })
      }
      console.log(this);
    }
    let vm = new Vue({
      data() {
        return {
          a: 1,
          b: 2
        }
      }
    })
    console.log(vm);

    // 获取属性描述得方法
    let obj = {
      get a() {
        return 123
      },
      set a(val) {
        console.log(234)
      }
    }
    console.log(obj.__lookupGetter__('a'))
    console.log(obj.__lookupSetter__('a'))

    console.log(Object.getOwnPropertyDescriptor(obj, 'a').get)
    console.log(Object.getOwnPropertyDescriptor(obj, 'a').set)
  </script>
</body>
</html>